<template>
    <view class="class-search-list">
        <gw-search-input @confirmSearch="confirmSearch" placeholder="搜索绘本"/>
        <mescroll-uni @down="downCallback"  :down="downOption"  @up="upCallback" :up="upOption" top="110"  class="mescroll-flex"  @init="mescrollInit">
            <view class="class-list common-interval">
                <shopBookCard
                        v-for="(item, index) in bookList"
                        :key="index"
                        :item="item"
                        @linkTo="linkTo"
                        @updateBooks="updateBooks"
                />
            </view>
        </mescroll-uni>
    </view>
</template>

<script>
    import gwSearchInput from '../components/gw-search-input'
    import shopBookCard from '../index/bookDetail/shop-book-card'
    import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue";
    import { getBooks } from '@/util/commonFn'
    import {mapGetters} from 'vuex';
    export default {
        name: "classSearchList",
        components: {
            shopBookCard, gwSearchInput, MescrollUni
        },
        computed: {
            ...mapGetters(['className'])
        },
        onLoad(params){
            let {idName, id} = params;
            this.idName = idName;
            this.id = id;
            uni.setNavigationBarTitle({
                title: this.className
            });
        },
        data(){
            return{
                bookList: [],
                idName: '',
                id: '',
                page: 1,
                limit: 20,
                nameAll: '',
                searchVal: '',
                downOption: {
                    auto: false,
                },
                upOption:{
                    use: true, // 是否启用上拉加载; 默认true
                    auto: true,
                    page: {
                        num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
                        size: 10 // 每页数据的数量,默认10
                    },
                    noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
                    empty: {
                        icon: 'https://img.thumbrary.com/empty.png',
                        tip: '暂无数据'
                    },
                    textNoMore:'我是有底线的 >_<'
                },
                mescroll: null
            }
        },
        methods: {
            confirmSearch(value){
                this.page = 1;
                this.searchVal = value;
                this.mescroll.resetUpScroll();
            },
            downCallback(mescroll){
                this.recommondData = [];
                this.page = 1;
                mescroll.resetUpScroll();
            },
            mescrollInit(mescroll) {
                this.mescroll = mescroll;
            },
            upCallback(mescroll){
                this.page = mescroll.num;
                this.getBooks(this.id);
            },
            updateBooks(){
                this.getBooks(this.id, {
                    page: 1,
                    limit: this.bookList.length
                });
            },
            linkTo(item){
                uni.navigateTo({
                    url: `../components/gw-book-detail?booksId=${item.booksId}`
                })
            },
            getBooks (id, para) {
                uni.showLoading({
                    title: '加载中',
                });
                let params = {
                    [this.idName+'Id']: id,
                    page: this.page,
                    limit: this.limit,
                    nameAll: this.searchVal || ''
                }
                para ? params = {...params, ...para} : null
                getBooks(params).then(result=>{
                    let data = result.data || [];
                    (this.page > 1 && !para) ? this.bookList.push(...data) : this.bookList = data;
                    this.mescroll && this.mescroll.endBySize(data.length, data.num);
                })
            },
        }
    }
</script>

<style scoped lang="scss">
    .class-list{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        padding-bottom: 120rpx;
        padding-top: 20rpx;
        box-sizing: border-box;
    }
</style>
